<template>
 <div>
     <el-row>
            <el-col :offset="6" :span="11">
        <div class="dynamic" v-for="(message) in messages" :key="message.id">

             <div v-if="message.kind==1">
                <span>获得1次赞同: 你在问题</span>
                <a href="#" @click="details(message.problemId)" class="problem">{{message.problemTitle}}</a>
                <span>下的回答被</span>
                <span class="name">{{message.fromUserName}}</span>
                <span>点赞了</span>
                <span class="time">----{{message.createTime | timeFormater}}</span>
             </div>
            <div v-else-if="message.kind==2">
                <span>有1条评论: 你在问题</span>
                <a href="#" @click="details(message.problemId)" class="problem">{{message.problemTitle}}</a>
                <span>下的回答被</span>
                <span class="name">{{message.fromUserName}}</span>
                <span>评论了</span>
                <span class="time">----{{message.createTime | timeFormater}}</span>   
            </div>
            <div v-else-if="message.kind==3">
                <span>增加1个粉丝: </span>
                    <a href="#" class="name">{{message.fromUserName}}</a>
                <span>关注了你</span>
                <span class="time">----{{message.createTime | timeFormater}}</span>   
            </div>   
            <div v-else-if="message.kind==4">
                <span>有一条回答: </span>
                    <span href="#" class="name">{{message.fromUserName}}</span>
                <span>回复了你的问题</span>
                <a href="#" @click="details(message.problemId)" class="problem">{{message.problemTitle}}</a>
                <span class="time">----{{message.createTime | timeFormater}}</span>   
            </div> 
            <div v-else>
                <span>你的问题被收藏了: </span>
                    <span  class="name">{{message.fromUserName}}</span>
                <span>收藏了你的问题</span>
                <a href="#" @click="details(message.problemId)" class="problem">{{message.problemTitle}}</a>
                <span class="time">----{{message.createTime | timeFormater}}</span>   
            </div>             
              <el-divider></el-divider>
        </div> 
        <el-pagination
                 @current-change="pageChange"
                background
                layout="prev, pager, next"
                :page-size="8"
                :current-page.sync="currentPage"
                :total="total">
        </el-pagination> 
            </el-col>
        </el-row>      
</div>

  
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'MyMessage',

    data() {
        return {
            messages:[],
              currentPage:1,//当前页码
            total:0, 
        };
    },

    mounted() {
          getRequest('/user/messageme/searchMessageMe/'+this.currentPage).then((result) => {
             this.messages=result.data;
                this.total = result.total;
        }).catch((err) => {
            
        });
    },

    methods: {
        pageChange(current){
                    getRequest('/user/messageme/searchMessageMe/'+current).then((result) => {

                    this.messages=result.data;
                    this.total = result.total;
                }).catch((err) => {
                    
                });
        },
        details(id){            
            this.$bus.$emit('problemDetails',id);
        },
    },
};
</script>

<style  scoped>
.dynamic{
    margin-top: 10px;
    font-size: 18px;

}
.dynamic:after { 
          visibility: hidden; 
          display: block; 
          content: " "; 
          clear: both; 
          height: 0;margin-bottom: 15px; }
.dynamic a{
     text-decoration: none;
}
.name{
    color:#225599;
    margin-right: 13px;
    margin-left: 12px;
}
.problem{
    color:#225599;
    margin-left: 20px;
    line-height: 40px;
}
.time{
    font-size: 17px;
    float:right;
    margin-top: 12px;
}
</style>